<template>
  <div>
    <div
      class="choose-items-con"
      @click="choose"
    >
      <div
        v-if="selectData && selectData.length"
        class="tags"
      >
        <p-tag
          v-for="item in selectData"
          :key="item[id]"
          style="margin-right:10px;"
        >
          {{ item[label] || `${item[id]} (已删除)` }}
        </p-tag>
      </div>
      <div
        v-else
        class="tags"
      >
        <span class="empty">{{ emptyText }}</span>
      </div>
      <div
        class="icon"
        :class="{'active':isActive}"
      >
        <p-icon type="down" />
      </div>
    </div>
    <p-modal
      v-model="isActive"
      title="选择管理员"
      width="860px"
    >
      <div style="display:flex;">
        <div style="width:240px;">
          <p-input
            v-model="keyword"
            clearable
            placeholder="输入姓名或用户名"
          />
        </div>
        <p-button
          type="primary"
          clearable
          style="margin-left:10px;"
          @click="search"
        >
          搜索
        </p-button>
      </div>
      <p-table
        ref="tableRef"
        :data-source="tableData"
        :columns="columns"
        :pagination="pagination"
        row-key="id"
        style="width: 100%;margin-top:16px;"
        @change="tableChange"
        :row-selection="rowSelection"
      />
      <div
        slot="footer"
        class="dialog-footer"
        style="display:flex;align-items:center;"
      >
        <div style="width:70px;">
          <span>已选择({{ chooseList.length }})</span>
        </div>
        <div class="modal-footer-scroll">
          <p-tag
            v-for="item in chooseList"
            :key="item.id"
            closable
            size="mini"
            style="margin-right:10px;"
            @close="removeChoose(item.id)"
          >
            {{ item.name || `${item.uid} (已删除)` }}
          </p-tag>
        </div>
        <p-button
          type="primary"
          @click="confirmChoose"
        >
          确 定
        </p-button>
      </div>
      </p-dialog>
    </p-modal>
  </div>
</template>

<script>
import { cloneObject } from '@u/util'
import { userList } from '@/api/manage'
export default {
  name: 'ChooseCon',
  props: {
    selectData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      searchDept: '',
      orgOptions: [],
      emptyText: '请选择',
      data: [],
      chooseList: [],
      selectedRowKeys: [],
      id: 'id',
      label: 'name',
      isActive: false,
      keyword: '',
      tableData: [],
      currentPage: 1,
      columns: [
        { title: '用户名', dataIndex: 'uid', key: 'uid' },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '手机号', dataIndex: 'mobile', key: 'mobile' }
      ],
      pagination: {
        total: 0,
        pageSize: 20, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['20', '30', '50', '100'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      },
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          this.selectedRowKeys = selectedRowKeys
          const ids = this.chooseList.map(item => {
            return item.id
          })
          const currentPageChoose = this.tableData.filter(item => selectedRowKeys.includes(item.id))
          currentPageChoose.forEach(item => {
            if (!ids.includes(item.id)) {
              this.chooseList.push(item)
            }
          })
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        }
      }
    }
  },
  mounted () {
    if (this.selectData && this.selectData.length) {
      this.data = cloneObject(this.selectData)
      this.chooseList = cloneObject(this.selectData) || []
    }
  },
  methods: {
    search () {
      this.currentPage = 1
      this.loadData()
    },
    choose () {
      this.isActive = true
      if (this.selectData && this.selectData.length) {
        this.data = cloneObject(this.selectData)
        this.chooseList = cloneObject(this.selectData)
      }
      this.loadData()
    },
    tableChange (pageOptions) {
      this.currentPage = pageOptions.current
      this.pagination.pageSize = pageOptions.pageSize
      this.loadData()
    },
    loadData () {
      const params = {
        pageNo: this.currentPage,
        limit: this.pagination.pageSize,
        keyword: this.keyword,
        code: this.searchDept,
        status: 1
      }
      userList(params).then(res => {
        if (res.code === 0) {
          this.pagination.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    removeChoose (id) {
      const resIndex = this.selectedRowKeys.findIndex(item => item === id)
      if (resIndex != -1) {
        this.selectedRowKeys.splice(resIndex, 1)
      }
      this.rowSelection.selectedRowKeys = this.selectedRowKeys
    },
    confirmChoose () {
      this.isActive = false
      this.data = this.chooseList
      this.$emit('confirm', this.data)
      this.$emit('update:selectData', this.data)
    }
  }
}
</script>

<style scoped lang="less">
  .choose-items-con {
    border: solid 1px #DEDEDF;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    transition: border-color .2s;
    display: flex;
    width: 100%;
    cursor: pointer;
    &:hover {
        border-color: #C0C4CC;
    }
    .tags{
        width:calc(100% - 25px);
        max-height: 160px;
        overflow-y: auto;
        padding-left: 15px;
    }
    .empty{
      opacity:0.6;
    }
    .icon{
        width:25px;
        cursor: pointer;
        transition: transform .3s;
        text-align: center;
        &.active{
            transform: rotate(180deg);
        }
    }
}

.modal-footer-scroll {
    width: calc(100% - 182px);
    text-align: left;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin:0 16px;
    padding: 6px 0;
}
.select-down .a-select-dropdown__item{
  padding:0;
}
</style>

<style lang="less">

</style>
